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Introduction 


RealPix, part of RealSystem G2, lets you stream images across an intranet or 
the World Wide Web. By combining your images with media such as audio 
and text, you can create compelling presentations for any number of purposes. 
This guide explains how to create RealPix presentations using graphics files 
and a simple mark-up language you use to specify visual effects. If you know 
HTML, you will master RealPix mark-up quickly. 


Note 
The HTML version of this manual, available at http:// 
www.real.com, contains RealPix examples you can view 
with RealPlayer. 


Tools for Creating RealPix 
You will need the following tools to create and test your RealPix presentation: 
+ Image Editing Software 


Image software such as Adobe Photoshop lets you create images in the 
formats RealPix can stream. You should know the basics of creating 
graphics for the Web, such as how to compress images and use color-safe 
palettes. 


Text Editor 


A RealPix file lists the graphics files uses in the presentation, creates the 
presentation timeline, and specifies the visual effects used. To create this 
file, you can use any text editor or XML editor that can save output as 
plain text. 


RealPlayer G2 


Use RealPlayer G2, available free at http://www.real.com, to test your 
RealPix presentation. Other applications may also have RealPlayer G2 
features that enable them to receive RealPix as well. Note that previous 
versions of RealPlayer, such as RealPlayer 4.0 and 5.0, cannot display 
RealPix. 


RealServer G2 


RealServer G2 streams your RealPix presentation to RealPlayer. If you are 
not operating RealServer yourself, you need to have access to RealServer 
through, for example, an Internet Service Provider (ISP). Note that 
previous versions of RealServer cannot stream RealPix. 
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* Microsoft Excel 97 


You will need this spreadsheet program to use the RealPix Bandwidth 
Calculator described in “Calculating Bandwidth Use” on page 36. 


Additional RealSystem G2 Resources 


In addition to this manual, you may need the following RealNetworks 
resources, available at http://www.real.com: 


+ RealSystem G2 Production Guide 


This manual explains the basics of streaming files with RealSystem. It tells 
how to calculate bandwidth needs and shows how to put a multimedia 
presentation together. 


¢ RealServer Administration Guide 


The basic reference for the RealServer administrator, this manual explains 
how to set up, configure, and run RealServer to stream multimedia. You 
need this manual only if you are running RealServer yourself. 


Conventions Used in this Manual 
The following table explains the conventions used in this manual. 


Notational Conventions 


Convention Meaning 





variables Italicized text represents variables. Substitute values 
appropriate for your situation. 





[options] Square brackets indicate optional values you may or may 
not need to use. 





choice 1| choice 2 Vertical lines separate values you can choose between. 





Ellipses indicate nonessential information omitted from 
the example. 
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RealPix Authoring 


With RealPix you can create streaming images, combining these images with 
other types of media such as audio or text. RealPix can stream images in these 
formats: 


* JPEG (.jpg) 
+ Iterated STiNG (.stg) 


Additional Information 
For information about the STiNG image format, visit 


hetp://www.iterated.com. 


When you have your images ready, you simply create a RealPix file with mark- 
up similar to HTML. This mark-up describes how and when the images 
display, specifying special effects such as a fade to a solid color or a »wipe” 


transition between two images. 


Preparing your Images 


For a RealPix presentation, you can use scanned pictures, clip art, or images 
downloaded from the Web. When preparing your presentation, maintain three 


separate sets of images: 


1. Original set 


The original set includes the unedited files you start with, such as original 
images off a scanner. Keep this set in case you need to change an image in 
the working set by, for example, restoring an area you cropped out. Leave 
these images uncompressed. 


2. Working set 


The working set comprises the files you have edited. You may have 
cropped the original images or combined them to form new images, for 
example. Keep these files uncompressed so that you can edit them later if 


necessary. 


3. Presentation set 


This set consists of the compressed files used in the presentation. For a 
given working set, you may have several presentation sets. For instance, 
you may have slightly compressed images for a high-bandwidth 
presentation, heavily compressed images for a low-bandwidth version. 
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Establishing a Timeline 


If your presentation consists solely of streaming RealPix images, you have full 
control over the RealPix timeline. When you combine RealPix with another 
component such as RealAudio or RealText, however, the other component 
may establish the timeline. You then need to coordinate the RealPix images 
with the other media file’s existing timeline. In these cases it is better to finish 
the other component first, then assemble your RealPix presentation to the 
final timeline. 


When working with an audio track, for example, think about the order of the 
images, deciding at which points in the audio timeline each image must 
display. When you are ready to assemble your RealPix presentation, play back 
the audio and note where you want to add an image. This will establish your 
RealPix presentation timeline. 


Once you have a timeline for your presentation and have ideas about how to 
place the images, you are ready to create a RealPix presentation. You may find 
it easier to create a storyboard to lay out the transitions and effects. Or you 
may want to dive right in, using the presentation in progress as your guide. 
Either way, carefully consider the bandwidth implications as you place your 
image and set the start times and durations. 


Additional Information 
For more on bandwidth, see “Bandwidth Usage” on 
page 34. 


Creating a RealPix Presentation 


The following steps describe how to create a RealPix file. A following section 
describes the RealPix mark-up tags in detail. 


> To Create a RealPix Presentation: 
1. Prepare your image presentation set. If you are using JPEG images, run the 


JPEGTRAN utility on them to prepare them for streaming. 


Additional Information 


For more on this utility, see “JPEGTRAN” on page 40. 


2. Open a new text document in your text editor. At the top of the file, add 
the <imfl> tag. Add the </imfl> end tag at the bottom: 
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5. 


<imfl> 
...All Other Mark-up Goes Between These Tags... 
</imfl> 


. Between the <imfl> and </imfl> tags, add the mark-up that defines how 


and when the RealPix images appear: 


<imfl> 


<image handle="1" name="drums.jpg”/> 
<image handle="2” name="franklin.jpg” /> 


</imfl> 
Additional Information 
See “Tag Descriptions” on page 11. 


. Save the file as plain text, using the .rp extension to mark the file as a 


RealPix file. On your local machine, open the RealPix file with RealPlayer 
to test the presentation. 


Note 
Playing a RealPix file on your local machine indicates 
whether the RealPix mark-up is correct. However, it does 
not guarantee that the file will stream across a network 
well. See “Bandwidth Usage” on page 34 for information 
on making a RealPix presentation stream well. 


To combine RealPix with another file, create a SMIL file that controls the 
overall presentation. For example, the SMIL file can list a RealPix file and 
an audio soundtrack to be played together: 
<smil> 
<body> 
<par> 
<ref src="rtsp://realserver.company.com/pix/ads.rp”/> 
<audio src="rtsp://realserver.company.com/pix/ads.ra”/> 


</par> 
</body> 
</smil> 


Additional Information 
See RealSystem G2 Production Guide available at http:// 
www.real.com for information about creating a SMIL 
file. 
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6. Move your files to RealServer. If you are using an Internet Service 
Provider, for example, contact the ISP’s RealServer administrator for 
instructions on doing this. 


7. In your Web page, add a hypertext link to the SMIL file. Or if the RealPix 
file is the only file in your presentation, simply link to that file. 


Additional Information 
RealSystem G2 Production Guide available at http:// 
www.real.com explains the options for linking your 
Web page to your presentation. It also explains how to 
play your RealPix presentation in your Web page rather 
than in RealPlayer. 


8. Test the RealPix presentation by clicking the hyperlink in your Web page. 
This launches RealPlayer, which displays the streaming images with the 
properties you defined through the RealPix mark-up. 


Controlling Image Size, Placement, and Aspect 


In your RealPix file you set a presentation display size. When RealPlayer plays 
your presentation, it expands its display window to this size. To create a simple 
presentation such as a basic slide show, you can simply fade the images in and 
out of the display window. Images the same size as the presentation window 
appear full-size. Larger images shrink to fit the window, smaller images 
expand. 


You may want to display just a portion of a source image, however. Or you may 
want to display two images side-by-side. RealPix lets you specify the area of a 
source image that appears in the display window. It also lets you determine the 
size and placement of images in the display window. To understand how this 
works, keep in mind the following definitions: 


Source image 
An image used in your presentation. A presentation may display one 
source image at a time, or it may display several source images arranged in 
a checkerboard pattern, for instance. 


Display window 
The RealPlayer window in which your presentation plays back. You set the 
display window size with the RealPix <head/> tag’s width and height 
attributes (see page 12). 
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Source rectangle 
The portion of a source image you want to display. You might want to 


display only the top half of a source image in the display window, for 
example. You can think of the source rectangle as a cropped version of 
your source image. 


Destination rectangle 
The area of the display window where the source rectangle appears. 


Consider the destination rectangle a window within the RealPlayer display 
window. The source and destination rectangles do not have to be the same 
size. 


Defining Image Size and Placement 


To use just a portion of a source image or the display window for an effect, you 
define the source or destination rectangle (or both) in a RealPix tag. To do 
this, you work with these attributes: 


“Srcx” or “dstx” 
Horizontal coordinate in pixels for the left-hand corner of the source 


rectangle (srcx) or destination rectangle (dstx). 


“srcy” or “dsty” 
Vertical coordinate in pixels for the left-hand corner of the source 
rectangle (srcy) or destination rectangle (dsty). 


“srcw” or “dstw” 
Width of the source rectangle (srcw) or destination rectangle (dstw) in 


pixels. A width of 0 (zero) is assumed to be the source image’s or 
destination window’s default width. 


“srch” or “dsth” 
Height of the source rectangle (srch) or destination rectangle (dsth) in 


pixels. A height of 0 (zero) is assumed to be the source image’s or 
destination window’s default height. 


For example, the upper, left-hand corner of the source image is identified as 
srcx="0", srcy="0". The upper, left-hand corner of the destination window is 
identified as dstx="0", dsty="0". 


In the example below, both the source image and destination window are 256 
pixels high by 256 pixels wide. The source tags make the top, left quadrant of 
the source image display in the destination window, effectively magnifying the 
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source rectangle by a factor of 2. Because the destination rectangle defaults to 
the destination window size, no destination rectangle coordinates are needed. 


256 


256 











Source Destination 


srcx="0" srcy="0" srch="128" srcw="128" 


In this next example, the source image displays in the top, right quadrant of 
the destination window, effectively reducing the size of the source image by 
half. No source coordinates are included, so the entire source image displays 
in the destination rectangle. 


256 


128 





256 256 


--128 











Source Destination 
dstx="128" dsty="0" dsth="128" dstw="128" 
This last example shows a portion of the source image displayed at a slightly 
larger size in the display window. In this case, both source and destination 
coordinates are given to define the source and destination rectangles. 





256 














Source Destination 


srcx="0"  srcy="0"  srch="128" srcw="128" 
dstx="64" dsty="32" dsth="192" dstw="192" 
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Note 
A soutce or destination attribute defaults to 0 (zero). 
Zero for height or width means the source image or 
destination window’s default height or width. You can 
therefore leave an attribute out to set x to “O,” y to “0,” w 
to the default width, or h to the default height. 


Controlling Image Aspect 


In the examples above, the source and destination rectangles all have height- 
to-width ratios of 1:1. This may not always be the case in your RealPix 
presentations. When source and destination rectangles have different height- 
to-width ratios, the RealPix <head/> tag’s aspect attribute (see page 15) 
determines how the source image displays. 


When aspect is ’true,” RealPix keeps a source rectangle’s height-to-width ratio 
constant when the destination rectangle has a different ratio. For example, a 
source rectangle’s height-to-width ratio of 1:1 stays constant even if the 
destination rectangle’s height-to-width ratio is 2:3. 


In these cases RealPix centers the source rectangle in the destination rectangle. 
It scales the source and preserves its height-to-width ratio until one 
dimension reaches the rectangle’s boundaries and the other dimension is 
within the boundaries. The existing background shows through any part of 
the destination rectangle not filled by the source rectangle. 


If you turn the aspect feature off, the width-to-height ratio in the source 
rectangle changes as necessary to fill the destination rectangle fully. This may 
distort the source image. The following figure shows how a source image fills 
different destination rectangles when aspect is false” or ”true.” 










Source Image 


Destination Images Destination Image 
aspect="false" aspect="true" 
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Tag Descriptions 


RealPix tags and attribute values create the RealPix timeline and visual effects. 
If you are familiar with HTML, you will master RealPix mark-up quickly. A 
typical RealPix tag looks like this: 


<fadein start="3”" duration="1" target="1"/> 


Syntax Rules 
Keep the following points in mind when writing a RealPix file: 
+ RealPix tags and attribute names should be lowercase. 


- A tag that does not have a corresponding end tag closes with a forward 
slash (/): 
<fadein.../> 


Only the <imfl> tag, which uses the end tag </imfl>, does not close with a 
slash. 


+ Attribute values must be enclosed in double quotation marks. 


- Unless noted otherwise, the order of attributes following the tag name 


does not matter. 
« You can add a comment to a RealPix file like this: 


<!-- This is a comment --> 


Additional Information 
When you are familiar with the tags, you can use “Tag 
Summary” on page 41 as a quick reference. To learn 
more about Extensible Mark-up Language (XML), the 
language that RealPix is based on, visit http:// 
www.w3.org/XML. 


<imfl> 


All information in the file occurs between an opening <imfl> tag and a closing 
</imfl> tag. This is the only tag that uses an end tag. 
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<head/> 


The <head/> tag follows the <imfl> tag in the RealPix file. Unlike the HTML 
<head> tag, the RealPix <head/> tag does not have a corresponding </head> tag. 
Instead, it ends with a slash: 


<head...attributes.../> 


The <head/> tag defines standard header information such as title, author, 
and copyright. It also sets necessary parameters such as the presentation 
duration and streaming bit rate. 


width and height 

These required attributes set the width of the display window in pixels. 
RealPlayer’s playback area expands to this size when the RealPix presentation 
begins. This example creates a RealPix playback area 256 by 256 pixels: 


<head width="256” height="256”.../> 


When you play RealPix with another display media type such as video, you lay 
out playback regions with SMIL. You typically create for RealPix a playback 
region that uses the same width and height you set here. If the region is a 
different size, the SMIL settings determine how to handle the size difference, 
such as by scaling or cropping the RealPix presentation to fit the display 


region. 
Additional Information 
For information on SMIL mark-up, see RealSystem G2 
Production Guide available at http://www.real.com. 
timeformat 


This optional attribute lets you set the format for start and duration times. By 
default, RealPix time values are in the following format: 


dd:hh:mm:ss.xyz 


Here, dd is days, hh is hours, mm is minutes, ss is seconds, x is tenths of 
seconds, y is hundredths of seconds, and z is milliseconds. Only the ss field is 
required. When the time value does not include a decimal point, the last field 
is read as the seconds. 


For example, 1:30 means 1 minute and 30 seconds, whereas 1:30:00 means 1 
hour and 30 minutes. Note that all the following values are equivalent. Each 
starts the effect 90 minutes after the RealPix presentation begins: 
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start="1:30:00.0" 
start="90:00" 
start="5400" 


You can change all RealPix time values to milliseconds by adding the following 
to the <head/> tag: 


<head timeformat="milliseconds”.../> 


In this case, the time value 5400 is read as 5400 milliseconds (5.4 seconds). 
Millisecond time values cannot include colons or a decimal point. 


duration 
The required duration attribute sets the length of the entire RealPix 
presentation. For example, the following value sets a duration of 50 seconds: 


<head duration="50".../> 


All RealPix effects stop immediately when the duration elapses. When the 
duration time exceeds the time required to complete the effects, the last effect 
stays frozen in the display window. 


Tip 
Set a high duration when you start building a RealPix 
presentation. Set the final duration time when you have 
finished defining the effects. 


Additional Information 
SMIL mark-up also includes a duration setting that can 
stop the RealPix presentation even if its internal 
duration time has not elapsed. See RealSystem G2 
Production Guide available at http://www.real.com. 


bitrate 

The required bitrate attribute specifies the maximum bandwidth the 
presentation consumes. Specify the value in bits per second (bps). For 
example, the following value sets a maximum bandwidth of 12000 bps 
(approximately 12 Kbps): 

<head bitrate="12000".../> 


Additional Information 
For information on dividing bandwidth between 
various media types in a presentation, see RealSystem G2 
Production Guide available at http://www.real.com. 
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“Bandwidth Usage” on page 34 explains how to 
calculate bandwidth requirements for a RealPix 
presentation. 


preroll 

The optional preroll attribute specifies the time to buffer data in RealPlayer 
before the start of the RealPix presentation. For example, the following sets 
the RealPix preroll to 40 seconds: 


<head preroll="40".../> 


RealSystem always calculates the preroll required for the presentation based 
on the image file sizes and presentation timing parameters. If this calculated 
value is larger than the preroll you set, it overrides your specified preroll. Your 
preroll value is used, however, if it is higher than the calculated preroll value. 
You therefore need to set the preroll value only if you want an artificially high 
preroll. 


A high preroll can be useful when you stream RealPix with another media 
type. Suppose that a RealVideo clip starts midway through a RealPix 
presentation. You can use a high preroll to download a significant portion of 
the RealPix data before the presentation starts. The RealVideo clip then has 
more bandwidth available when it begins. It can therefore stream its required 
preroll without competing with RealPix for bandwidth. 


Tip 
Always balance preroll values with viewer expectations. 
Viewers may not stay tuned to a presentation that takes 
along time to start playing back. 


Additional Information 
For more on preroll, see “Bandwidth Usage” on page 34. 


title, author, copyright 

These optional tags define the title, author, and copyright information for the 
presentation: 

<head title="The Garden” 


author=“Jane Doe” 
copyright="© 1998 RealNetworks, Inc.“.../> 


When present, these tags define the values that display in the RealPlayer 


information window. 
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url 

This optional attribute sets a hyperlink URL for the presentation. When the 
user clicks a presentation image, the URL opens in the user’s default Web 
browser. Individual effects can override this value with their own URL setting. 
For the attribute value, use a fully qualified URL such as the following: 


<head url=“http://www.real.com”.../> 


aspect 

With its default value of “true,” the aspect attribute keeps a source rectangle’s 
height-to-width ratio constant when the destination rectangle has a different 
ratio. You can turn this off by setting the attribute to false: 


<head aspect="false”.../> 


In this case, the height-to-width ratio in the source rectangle changes as 
necessary to fill the destination rectangle fully. This may distort the source 


image. 


Note 
The aspect attribute in the <head/> tag affects the entire 
presentation. Individual effects can override this setting 
with their own aspect attributes, however. 


Additional Information 
See “Controlling Image Aspect” on page 9. 


maxfps 

This optional attribute sets the maximum frames per second (fps) for 
transition effects. It is not required because RealPlayer determines the optimal 
frame rate based on the playback computer’s available CPU power. When CPU 
power is plentiful, RealPlayer renders transition effects at the maximum of 30 
fps. It scales down the transition rates accordingly when less CPU power is 


available. 


You can set the maxfps attribute low to create special effects. For example, a 


value of 5: 


<head...maxfps="5"/> 


keeps transitions constrained to no more than 5 fps. This causes visible jerks 
in transitions, which may be a desirable effect. 
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Note 
Specify maxfps as the last attribute in the <head/> tag. 
The maxfps value affects the entire presentation, but 
individual effects can override it with their own maxfps 
values. 


<image/> 


For each image you use in the RealPix presentation, you add an <image/> tag 
after the <head/> tag. The <image/> tag provides the image file location and 
assigns a unique handle number to the image. An <image/> tag looks like this: 


<image handle="2” name=“eagle.jpg”/> 


handle 

The required handle attribute assigns a positive integer to the image. Each 
handle number within the file must be unique. The RealPix effects then refer 
to the handle number rather than the file name. Here is an example: 


<image handle="23".../> 


name 
The name attribute is required. It specifies the image file name and a path 
relative to the location of the RealPix file. The following example designates 
an image file that resides in the same directory as the RealPix file: 


<image name="tulip.jpg”.../> 


This next example indicates that the image file resides one level below the 
RealPix file in the “images” directory: 


<image name="images/tulip.jpg”.../> 


Tip 
The file name and path are case-sensitive. If you are 
streaming files from RealServer, folder (directory) 
names should not contain spaces. 


Additional Information 
The relative syntax for paths works like relative 
hyperlink syntax in HTML. You can find additional 
information about this topic in an HTML reference. 
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<fill/> 


The <fill/> tag displays a colored rectangle in the display window. This is 
useful at the beginning of a presentation or anytime you want to paint over all 
or part of the display window. You can fade in an image, for instance, then fill 
the display window with black to paint over the image. A <fill/> tag looks like 
this: 


<fill start="0" color="blue” /> 


start 

The start attribute is required. It specifies the time from the beginning of the 
RealPix timeline that the fill occurs. The following example starts the fill 2.3 
seconds into the presentation timeline: 


<fill start="2.3".../> 


Additional Information 
For information on the time format, see the <head/> tag 
timeformat attribute on page 12. 


color 
This required attribute sets the fill color. You can use a predefined color name 


or a hexadecimal value as illustrated here: 


<fill color="#FF0000”.../> 


Additional Information 
For more on color values and names, see “Colors” on 


page 31. 


dstx, dsty, dstw, dsth 

These optional attributes define the size and placement of the filled region. 
Leave them out to fill the entire display window. To fill only a portion of the 
display window, set the destination rectangle’s x and y coordinates, as well as 
its height and width in pixels: 

dstx §_X coordinate of the destination rectangle. 

dsty Y coordinate of the destination rectangle. 

dstw Width of the destination rectangle. 


dsth Height of the destination rectangle. 
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Here’s an example that fills a rectangle 128 by 128 pixels. The filled region 
appears 92 pixels to the right of the main window’s left edge and 64 pixels 
down from its top edge 


<fill...dstx="92" dsty="64" dstw="128" dsth="128"/> 


Additional Information 
For more on the sizes and offsets of source and 
destination rectangles, see “Controlling Image Size, 
Placement, and Aspect” on page 6. 


<fadein/> 


The <fadein/> tag creates a gradual transition from the currently displayed 
color or image to another image. A <fadein/> tag looks like this: 


<fadein start="4" duration="3" target="2"/> 


The following figure illustrates a fade-in from a solid color to an image. 


aa 


The start attribute is required. It specifies the time from the beginning of the 


start 


RealPix timeline that the fade-in occurs. Here is an example that starts the 
fade-in 4 seconds into the timeline: 


<fadein start="4".../> 


Additional Information 
For information on the time format, see the <head/> tag 
timeformat attribute on page 12. 


duration 

This required attribute specifies the total time for the effect to complete. The 
higher the value, the slower the fade-in. For example, the following value 
means the fade-in takes 2.5 seconds to complete: 


<fadein duration="2.5".../> 
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target 
The target attribute is required. It specifies the <image/> tag handle (see page 
16) of the image to fade in. For example: 


<fadein target="2".../> 


dstx, dsty, dstw, dsth 

These optional attributes define the size and placement of the image that 
fades in. Leave them out to fade the image into the entire display window. To 
fade the image into a portion of the display window, set the destination 
rectangle’s x and y coordinates, as well as its height and width in pixels: 


dstx X coordinate of the destination rectangle. 
dsty YY coordinate of the destination rectangle. 
dstw Width of the destination rectangle. 


dsth Height of the destination rectangle. 


The following example fades the image into a rectangle 128 by 128 pixels. The 
image displays 20 pixels to the right of the main window’s left edge and 40 
pixels down from its top edge: 


<fadein dstx="20" dsty="40" dstw="128" dsth="128%.../> 


Additional Information 
For more on the sizes and offsets of source and 
destination rectangles, see “Controlling Image Size, 
Placement, and Aspect” on page 6. 


scx, srcy, srcw, srch 

These four attributes define what portion of the source image fades into the 
destination rectangle. Leave them out to fade the entire source image into the 
destination rectangle. To use only a portion of the source image, set the source 
rectangle’s x and y coordinates, as well as its height and width in pixels. 


srcx  _X coordinate of the source rectangle. 
srcy _Y coordinate of the source rectangle. 
srcw Width of the source rectangle. 


srch Height of the source rectangle. 


The following example selects from the source image a source rectangle 128 
pixels wide by 256 pixels high. The source rectangle starts 64 pixels to the 
right of the source image’s left edge and 92 pixels down from its top edge: 
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<fadein dstx="64" dsty="92" dstw="128" dsth="256".../> 


Additional Information 
For more on the sizes and offsets of source and 
destination rectangles, see “Controlling Image Size, 
Placement, and Aspect” on page 6. 


url 

This optional attribute sets a hyperlink URL for the effect. When the user 
clicks the image, the user’s default Web browser opens the URL. This URL 
value overrides the presentation default set in the <head/> tag (see page 15). 
Use a fully qualified URL like the following: 


<fadein url=“http://www.real.com”.../> 


aspect 

This optional attribute determines whether the source rectangle’s height-to- 
width ratio is maintained when the destination rectangle has a different 
height-to-width ratio. The presentation’s default value is set in the <head/> tag 
(see page 15), but you can override it for the fade-in: 


<fadein aspect=“false”.../> 
maxfps 
This optional attribute sets the maximum frames per second for the effect. It 


overrides any default maxfps value set in the <head/> tag. Include it as the last 
attribute. Here’s an example: 


<fadein...maxfps="5"/> 
Additional Information 
See the <head/> tag’s maxfps attribute on page 15 for 


information on setting a presentation default value for 


maxfps. 


<fadeout/> 


The <fadeout/> tag defines a transition from an image to a color. The basic 
<fadeout/> tag looks like this: 


<fadeout start="10" duration="3” color=“yellow’/> 
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The following figure illustrates a fade-out. 





start 

The start attribute is required. It specifies the time from the beginning of the 
RealPix timeline that the fade-out occurs. The following example starts the 
fade-out 10 seconds into the presentation: 


<fadeout start="10".../> 


Additional Information 
For information on the time format, see the <head/> tag 
timeformat attribute on page 12. 


duration 

This required attribute specifies the total time the effect takes to complete. 
The higher the value, the slower the fade-out. For example, the following 
makes the fade-out last 3.75 seconds: 


<fadeout duration="3.75".../> 


color 
This required attribute sets the color the image fades to. You can use a 
hexadecimal value or a predefined color name as illustrated here: 


<fadeout color=“blue”.../> 


Additional Information 
For more on color values and names, see “Colors” on 


page 31. 


dstx, dsty, dstw, dsth 

These optional attributes define the size and placement of the rectangle that 
fades out. Leave them out of the tag to fade out the entire display window. To 
fade out only a portion of the display window, set the destination rectangle’s x 
and y coordinates, as well as its height and width in pixels: 


dstx § X coordinate of the destination rectangle. 


dsty Y coordinate of the destination rectangle. 
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dstw Width of the destination rectangle. 


dsth Height of the destination rectangle. 


The following example fades out a rectangle 64 pixels wide by 64 pixels high. 
The rectangle starts 110 pixels to the right of the main window’s left edge and 
80 pixels down from its top edge: 


<fadeout dstx="110" dsty="80" dstw="64”" dsth="64".../> 


Additional Information 
For more on the sizes and offsets of source and 
destination rectangles, see “Controlling Image Size, 
Placement, and Aspect” on page 6. 


maxfps 
This optional attribute sets the maximum frames per second for the effect. It 
overrides any default maxfps value set in the <head/> tag. Include it as the last 


attribute. Here’s an example: 
<fadeout...maxfps="5“/> 
Additional Information 
See the <head/> tag’s maxfps attribute on page 15 for 
information on setting a presentation default value for 


maxfps. 


<crossfade/> 


The <crossfade/> tag creates a transition from one image to another, as 
illustrated in the following figure. 








start 

The start attribute is required. It specifies the time from the beginning of the 
RealPix timeline that the crossfade occurs. Here is an example that starts the 
effect 12.3 seconds into the timeline: 


<crossfade start="12.3".../> 
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Additional Information 
For information on the time format, see the <head/> tag 
timeformat attribute on page 12. 


duration 

This required attribute specifies the total time the effect takes to complete. 
The higher the value, the slower the crossfade. For example, the following 
makes the crossfade take just 1.5 seconds to complete: 


<crossfade duration="1.5".../> 


target 
The target attribute is required. It specifies the <image/> tag handle (see page 
16) of the image to fade in. For example: 


<crossfade target="2".../> 


dstx, dsty, dstw, dsth 

These optional attributes define the size and placement of the image that 
fades in. Leave them out to fade the image into the entire display window. To 
fade the image into a portion of the display window, set the destination 
rectangle’s x and y coordinates, as well as its height and width in pixels: 


dstx § _X coordinate of the destination rectangle. 
dsty Y coordinate of the destination rectangle. 
dstw Width of the destination rectangle. 


dsth Height of the destination rectangle. 


The following example fades the image into a rectangle 128 by 128 pixels. The 
image displays 20 pixels to the right of the main window’s left edge and 40 
pixels down from its top edge: 


<crossfade dstx="20" dsty="40" dstw="128" dsth="128".../> 


Additional Information 
For more on the sizes and offsets of source and 
destination rectangles, see “Controlling Image Size, 
Placement, and Aspect” on page 6. 


srcx, srcy, srcw, srch 
These four attributes define what portion of the source image fades into the 
destination rectangle. Leave them out to fade the entire source image into the 
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destination rectangle. To use only a portion of the source image, set the source 
rectangle’s x and y coordinates, as well as its height and width in pixels. 


srcx _X coordinate of the source rectangle. 
srcy _Y coordinate of the source rectangle. 
srcw Width of the source rectangle. 


srch Height of the source rectangle. 


The following example selects from the source image a source rectangle 128 
pixels wide by 256 pixels high. The source rectangle starts 64 pixels to the 
right of the source image’s left edge and 92 pixels down from its top edge: 


<crossfade dstx="64" dsty="92" dstw="128" dsth="256".../> 


Additional Information 
For more on the sizes and offsets of source and 
destination rectangles, see “Controlling Image Size, 
Placement, and Aspect” on page 6. 


url 

This optional attribute sets a hyperlink URL for the effect. When the user 
clicks the image, the user’s default Web browser opens the URL. This URL 
value overrides the presentation default set in the <head/> tag (see page 15). 
Use a fully qualified URL like the following: 


<crossfade url=“http://www.real.com”.../> 


aspect 

This optional attribute determines whether the source rectangle’s height-to- 
width ratio is maintained when the destination rectangle has a different 
height-to-width ratio. The presentation’s default value is set in the <head/> tag 
(see page 15), but you can override it for the crossfade: 


<crossfade aspect=“false”.../> 
maxfps 
This optional attribute sets the maximum frames per second for the effect. It 


overrides any default maxfps value set in the <head/> tag. Include it as the last 
attribute. Here’s an example: 


<crossfade...maxfps="5“"/> 
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<wipe/> 


Additional Information 
See the <head/> tag’s maxfps attribute on page 15 for 
information on setting a presentation default value for 
maxfps. 


The <wipe/> tag creates a transition from an image to another image, either by 
covering the displayed image or by pushing it out of the way with a sliding 
effect. A typical <wipe/> tag looks like this: 


<wipe type=“push” direction=“Left” start="10" duration="3" target="2"/> 


The following figure illustrates this effect. 





start 

The start attribute is required. It specifies the time from the beginning of the 
RealPix timeline that the wipe occurs. Here is an example that starts the effect 
30 seconds into the presentation: 


<wipe start="30".../> 


Additional Information 
For information on the time format, see the <head/> tag 
timeformat attribute on page 12. 


duration 

This required attribute specifies the total time the effect takes to complete. 
The higher the value, the slower the transition. For example, the following 
makes the wipe take 5.5 seconds to complete: 


<wipe duration="5.5".../> 


target 
The target value is required. It specifies the <image/> tag handle of the image 
(see page 16) to bring in with the wipe effect. For example: 


<wipe target="2".../> 
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type 

This required attribute defines the type of transition that occurs: 

normal New image moves over current image, which remains 
stationaty. 

push New image pushes current image out (both images move). 


Here is an example: 


<wipe type="“push”.../> 


direction 


This required attribute sets the direction the new image moves: 


left New image starts at right edge, moves toward left edge. 
right New image starts at left edge, moves toward right edge. 
up New image starts at bottom edge, moves toward top edge. 
down New image starts at top edge, moves toward bottom edge. 


For example: 


<wipe direction=“up”.../> 


dstx, dsty, dstw, dsth 

These optional attributes define the size and placement of the image that 
moves in. Leave them out to move the image into the entire display window. 
To move the image into a portion of the display window, set the destination 
rectangle’s x and y coordinates, as well as its height and width in pixels: 


dstx X coordinate of the destination rectangle. 
dsty Y coordinate of the destination rectangle. 
dstw Width of the destination rectangle. 


dsth Height of the destination rectangle. 


The following example moves the image into a rectangle 64 by 64 pixels. The 
image displays 50 pixels to the right of the main window’s left edge and 70 
pixels down from its top edge: 


<wipe dstx=“50" dsty="70" dstw="64”" dsth="64".../> 


Additional Information 
For more on the sizes and offsets of source and 
destination rectangles, see “Controlling Image Size, 
Placement, and Aspect” on page 6. 
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scx, srcy, srcw, srch 

These four attributes define what portion of the source image moves into the 
display rectangle. Leave them out to move the entire source image into the 
destination rectangle. To use a portion of the source image, set the source 
rectangle’s x and y coordinates, as well as its height and width in pixels. 


srcx _X coordinate of the source rectangle. 
srcy  Y coordinate of the source rectangle. 
srcw Width of the source rectangle. 


srch_ —_ Height of the source rectangle. 


The following example selects from the source image a source rectangle 128 
pixels wide by 128 pixels high. The source rectangle starts 89 pixels to the 
right of the source image’s left edge and 115 pixels down from its top edge: 


<wipe dstx="89" dsty="115”" dstw=“128” dsth="128".../> 


Additional Information 
For more on the sizes and offsets of source and 
destination rectangles, see “Controlling Image Size, 
Placement, and Aspect” on page 6. 


url 

This optional attribute sets a hyperlink URL for the new image. When the user 
clicks the image, the user’s default Web browser opens the URL. This URL 
value overrides the presentation default set in the <head/> tag (see page 15). 
Use a fully qualified URL like the following: 


<wipe url=“http://www.real.com”.../> 


aspect 

This optional attribute determines whether the source rectangle’s height-to- 
width ratio is maintained when the destination rectangle has a different 
height-to-width ratio. The presentation’s default value is set in the <head/> tag 
(see page 15), but you can override it for the wipe effect: 


<wipe aspect=“false”.../> 
maxfps 
This optional attribute sets the maximum frames per second for the effect. It 


overrides any default maxfps value set in the <head/> tag. Include it as the last 


attribute. Here’s an example: 


<wipe...maxfps="5“/> 
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Additional Information 
See the <head/> tag’s maxfps attribute on page 15 for 
information on setting a presentation default value for 
maxfps. 


<viewchange/> 


The <viewchange/> tag defines a pan or a zoom. A typical <viewchange/> tag 
looks like this: 


<viewchange start="24" duration="3” srcx=“80" srcy="80" srcw="48" srch="48"/> 


Note that <viewchange/> does not specify an image. The view change always 
affects the image currently in the display window. The following figure 
illustrates a zoom created with a <viewchange/> tag. 


aads 


start 





The start attribute is required. It specifies the time from the beginning of the 
RealPix timeline that the view change occurs. The following example starts the 
effect 35.2 seconds into the presentation timeline: 


<viewchange start="35.2".../> 


Additional Information 
For information on the time format, see the <head/> tag 
timeformat attribute on page 12. 


duration 

This required attribute specifies the total time the effect takes to complete. 
The higher the value, the slower the pan or zoom. For example, the following 
makes the transition take 8 seconds to complete: 


<viewchange duration="8".../> 
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dstx, dsty, dstw, dsth 
These four attributes define in pixels the placement and size of the 
destination rectangle. See below for more information. 


dstx §_X coordinate of the destination rectangle. 
dsty Y coordinate of the destination rectangle. 
dstw Width of the destination rectangle. 


dsth Height of the destination rectangle. 


srcx, srcy, srcw, srch 
These four attributes define in pixels the placement and size of the source 
image. See below for more information. 


srcx  _X coordinate of the source rectangle. 
srcy _ Y coordinate of the source rectangle. 
srcw Width of the source rectangle. 


srch Height of the source rectangle. 


maxfps 

This optional attribute sets the maximum frames per second for the effect. It 
overrides any default maxfps value set in the <head/> tag. Include it as the last 
attribute. Here’s an example: 


<viewchange...maxfps="5"/> 


Additional Information 
See the <head/> tag’s maxfps attribute on page 15 for 
information on setting a presentation default value for 
maxfps. 


Zooming in on an Image 


To zoom in on an image, display the image and then use <viewchange/> to 
define the area to zoom in on. The following example is taken from a RealPix 
presentation that displays in a window 256 by 256 pixels. The source image is 
also 256 by 256 pixels. The presentation fades in on the image and then zooms 
in, taking three seconds to complete the zoom: 

<fadein start="1" duration="2" target="1"/> 

<viewchange start="4" duration="3” srcx="64" srcy="64" srcw="128" srch="128"/> 
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The zoom selects an area 128 by 128 pixel square in the center of the source 
image. This square displays in the full 256 by 256 pixel display window. The 
following figure illustrates this zoom. 


256 





256 128 














Source Destination 


Because this zoom effect does not specify a destination rectangle, the zoom 
image fills the entire display window. But you can also use the destination 
coordinates (dstx, dsty, dstw, dsth) to specify a portion of the display window. 


Panning across an Image 


To pan across an image, you display a portion of the source image, then use 
<viewchange/> to move to a different part of the source image. The following 
example uses a RealPix presentation that displays in a window 256 by 256 
pixels. The source image is also 256 by 256 pixels: 

<fadein start="1" duration="3" target="2"/> 

<viewchange start=“4" duration="3” srcx="0" srcy="0" srcw="128" srch="128"/> 
<viewchange start="“7" duration="3” srcx="128" srcy="0" srcw="128" srch="128"/> 
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The presentation fades in an image, zooms in on the upper left-hand 
quadrant, then pans to the upper, right-hand quadrant. Each effect takes 
three seconds to complete. The following figure illustrates this movement. 
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Because this pan effect does not specify a destination rectangle, the source 
rectangle fills the entire display window. But you can also use the destination 
coordinates (dstx, dsty, dstw, dsth) to specify a portion of the display window. 


Colors 


RealPix effects that use colors can specify a 24-bit, hexadecimal color value. 
These are the same color values as those used in HTML. The first two hex 
digits represent red, the next two green, and the last two blue. For example, 
“#FF8000" indicates the 24-bit RGB color 255:128:0. Alternately, RealPix color 
attributes can use the predefined names shown below. 


white (#FFFFFF) silver (HCOCOCO) gray (#808080) black (#000000) 
yellow (#FFFFOO) fuschia (#FFOOFF) red (#FFO000) maroon (#800000) 
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lime (#00FFOO) olive (#808000) green (#008000) purple (#800080) 
aqua (#OOFFFF) teal (#008080) blue (HOOOOFF) navy (#000080) 


Example Presentation 


The following example file demonstrates the RealPix mark-up. 


<imfl> 

<head title=“RealPix(tm) Sample Effects” 
author=“Jay Slagle” 
copyright="(c)1998 RealNetworks, Inc.” 
timeformat=“dd:hh:mm:ss.xyz” 
duration="46" 
bitrate="12000" 
width="256" 
height="256" 
url=“http://www.real.com” 
aspect=“true”/> 


<!-- Assign handle numbers to images --/> 


<image handle="1" name=“jbeans.jpg”/> 
<image handle="2" name="peppers.jpg’/> 
<image handle="3” name=“elephant.jpg”/> 
<image handle="4" name="hippo.jpg”/> 
<image handle="5" name=“interior.jpg”/> 


<!-- Fade in and crossfade images --/> 


<fill start="0" color=“black”/> 
<fadein start="1" duration="2”" target="1"/> 
<crossfade start="4" duration="3" target="2"/> 


<!-- Fade out with expanding squares --/> 


<fadeout start="8" duration="1" color=“lime” 
dstx="96" dsty="96" dstw="64" dsth="64"/> 
<fadeout start="9" duration="1" color=“green” 
dstx="64" dsty="64" dstw="128" dsth="128"/> 
<fadeout start="10" duration="1" color="#6D8073” 
dstx="32" dsty="32" dstw="192" dsth="192"/> 
<fadeout start="11" duration="1" color="“black” 
dstx="0" dsty="0" dstw="256" dsth="256"/> 
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<!-- Wipe in checkerboard images --/> 


<fadein start="13”" duration="3”" target="3"/> 
<wipe type=“push” direction=“left” start="16" 
duration="3”" target="4" 
srcx="0" srcy="“0" srcw="128" srch="128" 
dstx="0" dsty="0" dstw="128" dsth="128"/> 
<wipe type=“push” direction=“right” start="19” 
duration="3” target="4" 
srcx="128" srcy="128" srcw="128" srch="128" 
dstx="128" dsty="128" dstw="128" dsth="128"/> 
<wipe type=“push” direction=“up” start="22” 
duration="3” target="4" 
srcx="0" srcy="128" srcw="128" srch="128" 
dstx="0" dsty="128" dstw="128" dsth="128"/> 
<wipe type=“push” direction=“down” start="25" 
duration="3" target="4" 
srcx="128" srcy="0" srcw="128" srch="128" 
dstx="128" dsty="0" dstw="128" dsth="128"/> 


<!-- Zoom in and pan --/> 


<fadein start="29" duration="3”" target="5"/> 
<viewchange start="32” duration="3" 
srcx="0" srcy="“0" srcw="160" srch="160"/> 
<viewchange start="35.5" duration="3" 
srcx="96" srcy="0" srcw="160" srch="160"/> 
<viewchange start="39" duration="3" 
srcx="96" srcy="96" srcw="160" srch="“160"/> 
<viewchange start="42.5" duration="3" 
srcx="0" srcy="96" srcw="160" srch="160"/> 
</imfl> 
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Bandwidth Usage 


When you stream your RealPix presentation to viewers over a network such as 
the World Wide Web, you need to consider the bandwidth (bit rate) the 
presentation will consume. You don’t need to consider bandwidth if copies of 
the presentation files will reside on each viewer’s desktop computer, however. 
This section helps you determine your presentation’s bandwidth usage. It also 
gives tips for lowering bandwidth consumption. 


Additional Information 
For a detailed explanation of bandwidth in RealSystem 
G2 presentations, see RealSystem G2 Production Guide 
available at http://www.real.com. 


Targeting a Bit Rate 


The following table lists the recommended maximum presentation bit rate for 
streaming files over different network connections. If you want to reach users 
with 28.8 Kbps modems, for example, your presentation should not consume 
more than 20 Kilobits of data per second. The full 28.8 Kbps is not available 
because bandwidth is required for noise, data loss, and packet overhead. 


Bit Rates Available for Streaming Files 


Suggested Maximum Bit 
Target Connection Speed Rate for Streaming Files 

















14.4 Kbps modem 10 Kbps 
28.8 Kbps modem 20 Kbps 
56.0 Kbps modem 34 Kbps 
56.0 Kbps ISDN 45 Kbps 
112 Kbps dual ISDN 80 Kbps 








You also need to consider bandwidth required by other media types you use in 
the presentation. If you target 28.8 Kbps modem connections, for example, 
and your presentation has a RealAudio soundtrack that consumes 5 Kbps, you 
have 15 Kbps left for RealPix. You should set this value in the <head/> tag 
bitrate attribute (see page 13). This tells RealServer your target bandwidth 
value. 


The bandwidth your presentation actually requires, however, depends on the 
total size of the image files and the presentation length. To get a rough 
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estimate of this bandwidth, add together the sizes of all image files used in the 
presentation. Convert this total to Kilobits using the chart below. Then divide 
by the RealPix presentation length in seconds. 


Converting File Size to Kilobits 











Using This Measurement Do This to Get Kilobits 
Megabytes Multiply by 8192 
Kilobytes Multiply by 8 

bytes Divide by 128 

bits Divide by 1024 





For example, if your image files add up to 200 Kilobytes, multiply 200 by 8 to 
get 1600 Kilobits. A presentation that lasts two minutes, for instance, uses an 
average of 13.3 Kilobits per second: 


(200 Kilobytes x 8)/120 seconds = 13.3 Kilobits per second 


If your RealPix target is 15 Kbps, your presentation should stream smoothly 
with bandwidth to spare. 


This simple estimate assumes that all images are each about the same size and 
are streamed at regular intervals. You run into bandwidth problems, however, 
if you use a lot of images near the start of the presentation. If the presentation 
begins by fading four big images into four quadrants of the display window, 
for example, RealServer needs to download a lot of image data before the 
presentation can begin. This results in a lengthy preroll. 


What is Preroll? 


Before it delivers a RealPix presentation, RealServer looks at the image sizes 
and the presentation timeline. Weighing these against the bit rate set in the 
<head/> tag (see page 13), RealServer determines how much data RealPlayer 
must receive before it can start to play the presentation. This ensures that once 
RealPlayer commences playback, it does not need to halt the presentation 
while it receives more data. The initial data sent before playback is the preroll. 
As a rule of thumb, you want the preroll under 15 seconds, ideally under 10 
seconds. 


For example, if a RealPix presentation streams for 60 seconds at 20 Kbps, it 
can deliver up to 1200 Kb of data during playback. If the RealPix presentation 
requires 1400 Kb of data, at least 200 Kb of data must be sent as preroll. At 20 
Kbps, this equals a 10 second preroll: 
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(1400 Kb - 1200 Kb)/20 Kbps = 10 seconds 


As mentioned above, presentation size divided by presentation length is only a 
rough guide to preroll length. RealServer considers when each image is 
introduced in the timeline when it calculates preroll. The following sections 
give instructions for determining preroll more accurately and for reducing 
bandwidth consumption. 


Calculating Bandwidth Use 


The RealPix Bandwidth Calculator (rpcale.xls) is a Microsoft Excel 97 
spreadsheet included in the utils directory of the HTML version of this 
manual. The calculator and the HTML manual are available for download 
from http://www.real.com. Use the calculator to derive a detailed picture of 
RealPix bandwidth usage. You may want to do this if you experience high 
preroll when streaming your presentation. You can then determine where the 
problem occurs and resolve it by modifying image size or adjusting the 


timeline. 


In the calculator you can enter RealPix information manually, or read ina 
RealPix (.rp) file to gather the image file names and display times. The 
calculator will also load the image sizes automatically. To be read 
automatically, a RealPix file must meet these criteria: 


+ It must follow the guidelines in “Syntax Rules” on page 11. All attribute 
values must be in double quotation marks, for example. 


+ It must have its time format in milliseconds. (See the timeformat attribute 
on page 12.) 
+ There can be no spaces around equals signs (“=”). 


In the calculator, make sure that the RealPix bit rate is set correctly. This 
reflects the RealPix bandwidth target set in the <head/> tag bitrate attribute 
(see page 13). The example below uses 20 Kbps, the bandwidth target for a 
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presentation delivered over a 28.8 Kbps modem. Set the buffer time to your 
targeted preroll, which should be approximately 10 seconds. 


Presentation Information 
Total Bit Rate 
28.8 


RealPix Bit Rate RealPix Buffer Time (secs) 
20.0 10.0 
Remaining Bit Rate 





Additional Information 


See “Targeting a Bit Rate” on page 34. 


When setting values manually, enter file names (not shown below) and image 
sizes in Kilobytes, along with the times each image first displays. These values 
go in the white columns. The calculator computes the values in gray. When 
you load a RealPix file automatically, the calculator adds an entry for each 
effect. After the first effect that uses an image, though, RealPlayer has the 
image in memory, so the entries for subsequent effects show that image as 0 
Kb. You can ignore these entries and examine only the initial appearance of 
each image. 


Based on the image sizes, the calculator computes the transmission time in 
seconds for each image. This is the time it takes RealServer to stream the 
image to RealPlayer at the presentation bit rate. The last column shows the 
earliest display time for each file. This reflects the earliest time in the RealPix 
timeline the image can appear. The calculator derives this time by subtracting 
the presentation preroll from the cumulative image transmission times. 


Image Size (Kb) Transmission Time (sec) Display Time (from rp file) Earliest Display Time 





The example above illustrates a RealPix presentation that will not stream with 
the desired preroll of 10 seconds. It shows, for example, that the first image 

can display at 2.3 seconds into the timeline at the earliest. The image is slated 
to appear at 1 second after the start of playback, however. The calculator flags 
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this display time in red to indicate the problem. As shown above, only the fifth 
image can display at its slated time of 84 seconds. 


Were it to stream this RealPix presentation, RealSystem would compensate 
with a preroll higher than the desired 10 seconds. Although the presentation 
would stream smoothly, viewers would have to wait too long for playback. (To 
determine the actual preroll for a presentation, increase the preroll value until 
all display time values turn black.) 


To improve a presentation’s performance, you can take steps described in 
“Lowering Bandwidth Consumption” on page 38. Then reload the RealPix file 
into the spreadsheet or update the image sizes and display times manually. 
The following figure illustrates a revised presentation that makes better use of 
bandwidth. 


Image Size (Kb) Transmission Time (sec) Display Time (from rp file) Earliest Display Time 





In this example the preroll is still 10 seconds, but files 1 through 3 are reduced 
in size. The entire presentation is lengthened and the images appear at more 
even intervals within the timeline. All display time values are now in black. 
The first image shows its earliest display time in green as (1.1). This indicates 
that the preroll is 1.1 seconds longer than necessary to display this image. If 
the earliest display times for all images appears in green, the actual preroll will 
be lower than the value listed in the calculator. 


Lowering Bandwidth Consumption 


If your presentation requires too much initial buffering, you can take several 
steps to lower the preroll. You can modify your RealPix presentation or 
balance multiple media types so that initial presentation bandwidth needs are 
low. This gives RealSystem extra bandwidth when the presentation starts to 
stream the higher bit rate items required later in the timeline. 


Lowering RealPix Preroll 


Within the RealPix presentation, you can do the following to lower bandwidth 
consumption: 
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+ Crop out unused portions of the source files. This lowers the source file 
sizes, making more efficient use of bandwidth than cropping images by 
defining source rectangles through RealPix mark-up tags. 


+ Reduce the resolution and number of colors in images while maintaining 
satisfactory image quality. For JPEG files, experiment with higher 
compression rates. 


+ Use smaller images at the beginning of the presentation. They will stream 
to RealPlayer faster and RealServer can use the extra bandwidth to start 
delivering larger files needed later. 


+ Introduce images gradually over the timeline. Don’t use rapid effects with 
a lot of images at the beginning of the presentation. Once you have 
displayed all images, however, you can use rapid effects because RealPlayer 
holds the image data in memory. 


+ Increase the length of the presentation by, for example, adding an extra 
second to the duration time of each effect. 


Masking Preroll using Other Media 


When you stream RealPix along with a low-bandwidth media file, you can 
mask the RealPix preroll so that it takes place while the other file plays. For 
example, start the presentation with RealText (to display opening credits, for 
example) or a low-bandwidth RealAudio file (as a narration, for instance) to 
consume from 1 to 5 Kbps at the start of the presentation. 


As these files play, RealServer takes advantage of the extra bandwidth available 
in the connection to stream the RealPix preroll. If RealPix starts 20 seconds 
after the RealAudio or RealText file, for example, you make 300 to 380 
Kilobits available (at 20 Kbps) for the RealPix preroll. To do this, you assemble 
the overall presentation with a SMIL file, setting a 20-second delay for RealPix. 


Additional Information 
For more on SMIL and RealAudio, see RealSystem G2 
Production Guide. For more on RealText, see RealText 
Authoring Guide. Both are available at http:// 
www.real.com. 
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Tools 


CJPEG 


The tools described below will help you create a RealPix presentation. They are 
included in the utils directory of the HTML version of this manual. To get 
these tools, download the bundled HTML version of this manual from http:/ 
/www.real.com/. 


Additional Information 
For information on the RealPix Bandwidth Calculator, 
see “Calculating Bandwidth Use” on page 36. 


CJPEG is aJPEG compression tool you run from the command line on 
Windows 32-bit operating systems. It is useful if you have no other image 
editing software to create JPEG files. It takes as input Windows bitmap (.bmp) 
or Targa (.tga) format files and compresses them into JPEG files (.jpg). Run 
the tool with this syntax: 


cjpeg -outfile output.jpg -quality X -restart 1B input.bmp 


Here, X is the quality of compression in the range from 1 to 100. The practical 
range of JPEG quality is approximately 40-90. 


JPEGTRAN 


JPEGTRAN optimizes JPEG (.jpg) images for streaming with RealPix. It modifies 
them so that if packets are lost, missing image data is randomly dispersed 
instead of appearing as continuous blank lines across the image. Process 
existing JPEG images with this tool before streaming them with RealPix. Run 
this tool from the command line on Windows 32-bit operating systems. The 
JPEGTRAN syntax is: 


jpegtran -restart 1B -outfile output.jpg input.jpg 
Note 


If you produced your JPEG images with CJPEG, you do 
not need to run JPEGTRAN on them. 
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Tag Summary 

<head/> 

Attribute Definition Required Default Example 
aspect Presentation default for no true aspect="false" 


maintaining aspect ratio of images 
(true or false). Other effects can 
override this. 


























author Name of author. no (none) author="Jane Doe" 
bitrate Peak bandwidth in bits per second. | yes (none) bitrate="64000" 
copyright | Copyright notice. no (none) copyright="© 1998 
RealNetworks, Inc." 
duration Duration of RealPix presentation. | yes (none) duration="50" 
height Height of display window in pixels. | yes (none) height="256" 
maxfps Maximum frames per second for | no calculated maxfps="5" 
transition effects. Include as last automatically 
attribute. 
preroll Time for which data should be no calculated preroll="20" 
buffered before presentation automatically 
starts. 
timeformat | Specifies format for start and no hh:mm:ss.xyz | timeformat="milliseconds" 


duration times. Can set format 
from default to milliseconds. 





























title Name of presentation. no (none) title="The Garden" 
url Hyperlink URL for presentation no (none) url="http:// 
images. www.real.com" 

width Width of display window in pixels. | yes (none) width="256" 

<image/> 

Attribute Definition Required Default Example 

handle | Unique number for the image. Referred to by | yes (none) handle="23" 
certain effects. 

name Path to the image file, relative to the location | yes (none) name="tulip.jpg" 
of the RealPix file. 
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<fill/> 
Attribute Definition Required Default Example 
color Hexadecimal color description or standard yes (none) color="yellow" 
palette color. 
dsth Height in pixels of destination rectangle. no 0 dsth="256" 
dstw Width in pixels of the destination rectangle. no 0 dstw="256" 
dstx X coordinate in pixels of the destination no. 0 dstx="128" 
rectangle. 
dsty Y coordinate in pixels of the destination no 0 dsty="128" 
rectangle. 
start Time from the start of the RealPix track that the | yes (none) start="23" 
fill occurs. 
<fadein/> 
Attribute Definition Required Default Example 
aspect Maintain image aspect ratio, true or false. | no set in <head/> | aspect="false" 
dsth Height in pixels of the destination no 0 dsth="128" 
rectangle. 
dstw Width in pixels of the destination no 0 dstw="128" 
rectangle. 
dstx X coordinate in pixels of the destination _| no 0 dstx="20" 
rectangle. 
dsty Y coordinate in pixels of the destination no 0 dsty="30" 
rectangle. 
duration | Time for the effect to complete. yes (none) duration="0.75" 
maxfps Maximum frames per second for effect. no set in <head/> | maxfps="5" 
Include as last attribute. 
srch Height in pixels of source rectangle. no 0 srch="128" 
srcw Width in pixels of source rectangle. no 0 srcw="128" 
sTcx X coordinate in pixels of the source no 0 srcx="128" 
rectangle. 
srcy Y coordinate in pixels of the source no 0 srcy="128" 
rectangle. 














(Table Page 1 of 2) 
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Attribute Definition Required Default Example 

start Time from the beginning of the RealPix yes (none) start="4" 
track that the effect begins. 

target Target image handle. yes (none) target="15" 

url Hyperlink URL for image. no set in <head/> | url="http:// 

www.real.com" 
(Table Page 2 of 2) 

<fadeout/> 

Attribute Definition Required Default Example 

color Hexadecimal color description or standard | yes (none) color="black" 
palette color. color="#FF8000" 

dsth Height in pixels of the destination rectangle. | no dsth="128" 

dstw Width in pixels of the destination rectangle. | no 0 dstw="128" 

dstx X coordinate in pixels of the destination no dstx="128" 
rectangle. 

dsty Y coordinate in pixels of the destination no 0 dsty="128" 
rectangle. 

duration | Total time for the transition to complete. yes (none) duration="1.2" 

maxfps Maximum frames per second for effect. no set in <head/> | maxfps="5" 
Include as last attribute. 

start Time from the beginning of the RealPix yes (none) start="10" 
track that the effect begins. 

<crossfade/> 

Attribute Definition Required Default Example 

aspect Maintain image aspect ratio, true or false. | no set in<head/> | aspect="false" 

dsth Height in pixels of the destination no 0 dsth="64" 
rectangle. 

dstw Width in pixels of the destination no 0 dstw="64" 
rectangle. 

dstx X coordinate in pixels of the destination | no 0 dstx="64" 
rectangle. 

















(Table Page 1 of 2) 
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Attribute Definition Required Default Example 

dsty Y coordinate in pixels of the destination | no 0 dsty="64" 
rectangle. 

duration | Total time for the transition to complete. | yes (none) duration="1.8" 

maxfps Maximum frames per second for effect. no set in <head/> | maxfps="5" 
Include as last attribute. 

srch Height in pixels of the source rectangle. no srch="128" 

srcw Width in pixels of the source rectangle. no 0 srcw="128" 

STCX X coordinate in pixels of the source no srcx="64" 
rectangle. 

srcy Y coordinate in pixels of the source no 0 srcy="64" 
rectangle. 

start Time from the beginning of the yes (none) start="20" 
presentation that the crossfade begins. 

target Target image handle. yes (none) target="1" 

url Hyperlink URL for image. no set in <head/> | url="http:// 

www.real.com" 
(Table Page 2 of 2) 
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<wipe/> 

Attribute Definition Required Default Example 

aspect Maintain image aspect ratio, true or false. no set in<head/> | aspect="false" 

direction | Direction the new image moves: up, down, | yes (none) direction="up" 
left, or right. 

dsth Height in pixels of the destination rectangle. | no dsth="64" 

dstw Width in pixels of the destination rectangle. | no 0 dstw="64" 

dstx X coordinate in pixels of the destination no dstx="64" 
rectangle. 

dsty Y coordinate in pixels of the destination no 0 dsty="64" 
rectangle. 

duration | Time for the transition to complete. yes (none) duration="3.5" 

maxfps Maximum frames per second for effect. no set in <head/> | maxfps="5" 
Include as last attribute. 

srch Height in pixels of the source rectangle. no 0 srch="64" 

srcw Width in pixels of the source rectangle. no srcw="64" 

sTcx X coordinate in pixels of the source no srcx="64" 
rectangle. 

srcy Y coordinate in pixels of the source no 0 srcy="64" 
rectangle. 

start Time from the beginning of the yes (none) start="25" 
presentation that the wipe begins. 

target Target image handle. yes (none) target="2" 

type The way the wipe occurs, either moving over | yes (none) type="push" 
the top of the current image (normal) or 
pushing it out (push). 

url Hyperlink URL for image. no set in <head/> | url="http:// 

















www.real.com" 
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<viewchange/> 

Attribute Definition Required Default Example 

dsth Height in pixels of the destination no 0 dsth="64" 
rectangle. 

dstw Width in pixels of the destination no 0 dstw="64" 
rectangle. 

dstx X coordinate in pixels of the destination | no 0 dstx="64" 
rectangle. 

dsty Y coordinate in pixels of the destination | no 0 dsty="64" 
rectangle. 

duration | Time for the effect to complete. yes (none) duration="5" 

maxfps Maximum frames per second for effect. no set in <head/> | maxfps="5" 
Include as last attribute. 

srch Height in pixels of the source rectangle. no srch="256" 

srcw Width in pixels of the source rectangle. no 0 srcw="256" 

sTcx X coordinate in pixels of the source no srcx="512" 
rectangle. 

srcy Y coordinate in pixels of the source no 0 srcy="64" 
rectangle. 

start Time from the beginning of the yes (none) start="35" 





presentation that the view change begins. 
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